import React from 'react'
import { Card, message, theme } from 'antd'
import GenericTable, { FormField } from './GenericTable'
import { PageResult, TableColumn, PageParams } from '../types/component'
import { User } from '../types/user'

// 模拟API调用
const userApi = {
  // 获取用户数据
  fetch: async (params: PageParams): Promise<PageResult<User>> => {
    // 模拟数据
    const mockUsers: User[] = [
      { id: 1, name: '张三', email: 'zhangsan@example.com', role: '管理员', status: 'active' },
      { id: 2, name: '李四', email: 'lisi@example.com', role: '编辑者', status: 'active' },
      { id: 3, name: '王五', email: 'wangwu@example.com', role: '查看者', status: 'inactive' },
      { id: 4, name: '赵六', email: 'zhaoliu@example.com', role: '编辑者', status: 'active' },
      { id: 5, name: '钱七', email: 'qianqi@example.com', role: '查看者', status: 'inactive' },
    ]
    
    // 模拟分页
    const start = (params.page - 1) * params.pageSize
    const end = start + params.pageSize
    const list = mockUsers.slice(start, end)
    
    return {
      list,
      total: mockUsers.length,
      page: params.page,
      pageSize: params.pageSize
    }
  },

  // 创建用户
  create: async (user: Partial<User>): Promise<User> => {
    return {
      id: Date.now(),
      name: user.name || '',
      email: user.email || '',
      role: user.role || '查看者',
      status: user.status || 'active'
    }
  },

  // 更新用户
  update: async (user: User): Promise<User> => {
    return user
  },

  // 删除用户
  delete: async (id: number): Promise<void> => {
    console.log('删除用户:', id)
  }
}

const UserManagement: React.FC = () => {
  const { token } = theme.useToken()

  // 表格列配置
  const columns: TableColumn<User>[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      width: 80
    },
    {
      title: '姓名',
      dataIndex: 'name',
      width: 120
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      width: 200
    },
    {
      title: '角色',
      dataIndex: 'role',
      width: 120
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 100,
      render: (value: string) => (
        <span style={{ 
          color: value === 'active' ? token.colorSuccess : token.colorError,
          fontWeight: 'bold'
        }}>
          {value === 'active' ? '启用' : '禁用'}
        </span>
      )
    }
  ]

  // 表单字段配置
  const formFields: FormField<User>[] = [
    {
      name: 'name',
      label: '姓名',
      required: true
    },
    {
      name: 'email',
      label: '邮箱',
      required: true
    },
    {
      name: 'role',
      label: '角色',
      required: true
    },
    {
      name: 'status',
      label: '状态',
      required: true
    }
  ]

  // 处理创建事件
  const handleCreated = (user: User) => {
    message.success('创建用户成功')
  }

  // 处理更新事件
  const handleUpdated = (user: User) => {
    message.success('更新用户成功')
  }

  // 处理删除事件
  const handleDeleted = (id: number) => {
    message.success('删除用户成功')
  }

  return (
    <Card title="用户管理" style={{ height: '100%' }}>
      <GenericTable
        api={userApi}
        columns={columns}
        formFields={formFields}
        onCreated={handleCreated}
        onUpdated={handleUpdated}
        onDeleted={handleDeleted}
        config={{
          title: '用户列表',
          defaultPageParams: { page: 1, pageSize: 10 }
        }}
      />
    </Card>
  )
}

export default UserManagement